<!-- HTML header for doxygen 1.8.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<title>OpenCV: Adding a Trackbar to our applications!</title>
<link href="../../opencv.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../jquery.js"></script>
<script type="text/javascript" src="../../dynsections.js"></script>
<script type="text/javascript" src="../../tutorial-utils.js"></script>
<link href="../../search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../search/searchdata.js"></script>
<script type="text/javascript" src="../../search/search.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX","output/HTML-CSS"],
});
//<![CDATA[
MathJax.Hub.Config(
{
  TeX: {
      Macros: {
          matTT: [ "\\[ \\left|\\begin{array}{ccc} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{array}\\right| \\]", 9],
          fork: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ \\end{array} \\right.", 4],
          forkthree: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ \\end{array} \\right.", 6],
          forkfour: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ #7 & \\mbox{#8}\\\\ \\end{array} \\right.", 8],
          vecthree: ["\\begin{bmatrix} #1\\\\ #2\\\\ #3 \\end{bmatrix}", 3],
          vecthreethree: ["\\begin{bmatrix} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{bmatrix}", 9],
          cameramatrix: ["#1 = \\begin{bmatrix} f_x & 0 & c_x\\\\ 0 & f_y & c_y\\\\ 0 & 0 & 1 \\end{bmatrix}", 1],
          distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \\tau_x, \\tau_y]]]]) \\text{ of 4, 5, 8, 12 or 14 elements}"],
          distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
          hdotsfor: ["\\dots", 1],
          mathbbm: ["\\mathbb{#1}", 1],
          bordermatrix: ["\\matrix{#1}", 1]
      }
  }
}
);
//]]>
</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
<link href="../../doxygen.css" rel="stylesheet" type="text/css" />
<link href="../../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<!--#include virtual="/google-search.html"-->
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="../../opencv-logo-small.png"/></td>
  <td style="padding-left: 0.5em;">
   <div id="projectname">OpenCV
   &#160;<span id="projectnumber">4.5.2</span>
   </div>
   <div id="projectbrief">Open Source Computer Vision</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "../../search",false,'Search');
</script>
<script type="text/javascript" src="../../menudata.js"></script>
<script type="text/javascript" src="../../menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('../../',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div id="nav-path" class="navpath">
  <ul>
<li class="navelem"><a class="el" href="../../d9/df8/tutorial_root.html">OpenCV Tutorials</a></li><li class="navelem"><a class="el" href="../../de/d3d/tutorial_table_of_content_app.html">Application utils (highgui, imgcodecs, videoio modules)</a></li>  </ul>
</div>
</div><!-- top -->
<div class="header">
  <div class="headertitle">
<div class="title">Adding a Trackbar to our applications! </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><p><b>Next Tutorial:</b> <a class="el" href="../../d7/d73/tutorial_raster_io_gdal.html">Reading Geospatial Raster files with GDAL</a></p>
<table class="doxtable">
<tr>
<th align="right"></th><th align="left"></th></tr>
<tr>
<td align="right">Original author </td><td align="left">Ana Huamán </td></tr>
<tr>
<td align="right">Compatibility </td><td align="left">OpenCV &gt;= 3.0 </td></tr>
</table>
<ul>
<li>In the previous tutorials (about <a class="el" href="../../d5/dc4/tutorial_adding_images.html">Adding (blending) two images using OpenCV</a> and the <a class="el" href="../../d3/dc1/tutorial_basic_linear_transform.html">Changing the contrast and brightness of an image!</a>) you might have noted that we needed to give some <b>input</b> to our programs, such as \(\alpha\) and \(beta\). We accomplished that by entering this data using the Terminal.</li>
<li><p class="startli">Well, it is time to use some fancy GUI tools. OpenCV provides some GUI utilities (<b>highgui</b> module) for you. An example of this is a <b>Trackbar</b>.</p>
<div class="image">
<img src="../../Adding_Trackbars_Tutorial_Trackbar.png" alt="Adding_Trackbars_Tutorial_Trackbar.png"/>
</div>
</li>
<li>In this tutorial we will just modify our two previous programs so that they get the input information from the trackbar.</li>
</ul>
<h2>Goals </h2>
<p>In this tutorial you will learn how to:</p>
<ul>
<li>Add a Trackbar in an OpenCV window by using <a class="el" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv::createTrackbar</a></li>
</ul>
<h2>Code </h2>
<p>Let's modify the program made in the tutorial <a class="el" href="../../d5/dc4/tutorial_adding_images.html">Adding (blending) two images using OpenCV</a>. We will let the user enter the \(\alpha\) value by using the Trackbar.</p>
 <div class='newInnerHTML' title='cpp' style='display: none;'>C++</div><div class='toggleable_div label_cpp' style='display: none;'><p> This tutorial code's is shown lines below. You can also download it from <a href="https://github.com/opencv/opencv/tree/master/samples/cpp/tutorial_code/HighGUI/AddingImagesTrackbar.cpp">here</a> </p><div class="fragment"><div class="line"></div><div class="line"><span class="preprocessor">#include &quot;<a class="code" href="../../d6/d87/imgcodecs_8hpp.html">opencv2/imgcodecs.hpp</a>&quot;</span></div><div class="line"><span class="preprocessor">#include &quot;<a class="code" href="../../d4/dd5/highgui_8hpp.html">opencv2/highgui.hpp</a>&quot;</span></div><div class="line"><span class="preprocessor">#include &lt;iostream&gt;</span></div><div class="line"></div><div class="line"><span class="keyword">using namespace </span><a class="code" href="../../d2/d75/namespacecv.html">cv</a>;</div><div class="line"><span class="keyword">using</span> std::cout;</div><div class="line"></div><div class="line"><span class="keyword">const</span> <span class="keywordtype">int</span> alpha_slider_max = 100;</div><div class="line"><span class="keywordtype">int</span> alpha_slider;</div><div class="line"><span class="keywordtype">double</span> alpha;</div><div class="line"><span class="keywordtype">double</span> beta;</div><div class="line"></div><div class="line"><a class="code" href="../../d3/d63/classcv_1_1Mat.html">Mat</a> src1;</div><div class="line"><a class="code" href="../../d3/d63/classcv_1_1Mat.html">Mat</a> src2;</div><div class="line"><a class="code" href="../../d3/d63/classcv_1_1Mat.html">Mat</a> dst;</div><div class="line"></div><div class="line"></div><div class="line"><span class="keyword">static</span> <span class="keywordtype">void</span> on_trackbar( <span class="keywordtype">int</span>, <span class="keywordtype">void</span>* )</div><div class="line">{</div><div class="line">   alpha = (double) alpha_slider/alpha_slider_max ;</div><div class="line">   beta = ( 1.0 - alpha );</div><div class="line">   <a class="code" href="../../d2/de8/group__core__array.html#gafafb2513349db3bcff51f54ee5592a19">addWeighted</a>( src1, alpha, src2, beta, 0.0, dst);</div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#ga453d42fe4cb60e5723281a89973ee563">imshow</a>( <span class="stringliteral">&quot;Linear Blend&quot;</span>, dst );</div><div class="line">}</div><div class="line"></div><div class="line"><span class="keywordtype">int</span> main( <span class="keywordtype">void</span> )</div><div class="line">{</div><div class="line">   src1 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">imread</a>( <a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">samples::findFile</a>(<span class="stringliteral">&quot;LinuxLogo.jpg&quot;</span>) );</div><div class="line">   src2 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">imread</a>( <a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">samples::findFile</a>(<span class="stringliteral">&quot;WindowsLogo.jpg&quot;</span>) );</div><div class="line"></div><div class="line">   <span class="keywordflow">if</span>( src1.<a class="code" href="../../d3/d63/classcv_1_1Mat.html#abbec3525a852e77998aba034813fded4">empty</a>() ) { cout &lt;&lt; <span class="stringliteral">&quot;Error loading src1 \n&quot;</span>; <span class="keywordflow">return</span> -1; }</div><div class="line">   <span class="keywordflow">if</span>( src2.<a class="code" href="../../d3/d63/classcv_1_1Mat.html#abbec3525a852e77998aba034813fded4">empty</a>() ) { cout &lt;&lt; <span class="stringliteral">&quot;Error loading src2 \n&quot;</span>; <span class="keywordflow">return</span> -1; }</div><div class="line"></div><div class="line">   alpha_slider = 0;</div><div class="line"></div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#ga5afdf8410934fd099df85c75b2e0888b">namedWindow</a>(<span class="stringliteral">&quot;Linear Blend&quot;</span>, <a class="code" href="../../d0/d90/group__highgui__window__flags.html#ggabf7d2c5625bc59ac130287f925557ac3acf621ace7a54954cbac01df27e47228f">WINDOW_AUTOSIZE</a>); <span class="comment">// Create Window</span></div><div class="line"><span class="comment"></span></div><div class="line">   <span class="keywordtype">char</span> TrackbarName[50];</div><div class="line">   sprintf( TrackbarName, <span class="stringliteral">&quot;Alpha x %d&quot;</span>, alpha_slider_max );</div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">createTrackbar</a>( TrackbarName, <span class="stringliteral">&quot;Linear Blend&quot;</span>, &amp;alpha_slider, alpha_slider_max, on_trackbar );</div><div class="line"></div><div class="line">   on_trackbar( alpha_slider, 0 );</div><div class="line"></div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#ga5628525ad33f52eab17feebcfba38bd7">waitKey</a>(0);</div><div class="line">   <span class="keywordflow">return</span> 0;</div><div class="line">}</div></div><!-- fragment -->  </div>  <div class='newInnerHTML' title='java' style='display: none;'>Java</div><div class='toggleable_div label_java' style='display: none;'><p> This tutorial code's is shown lines below. You can also download it from <a href="https://github.com/opencv/opencv/tree/master/samples/java/tutorial_code/highgui/trackbar/AddingImagesTrackbar.java">here</a> </p><div class="fragment"><div class="line"><span class="keyword">import</span> java.awt.BorderLayout;</div><div class="line"><span class="keyword">import</span> java.awt.Container;</div><div class="line"><span class="keyword">import</span> java.awt.Image;</div><div class="line"></div><div class="line"><span class="keyword">import</span> javax.swing.BoxLayout;</div><div class="line"><span class="keyword">import</span> javax.swing.ImageIcon;</div><div class="line"><span class="keyword">import</span> javax.swing.JFrame;</div><div class="line"><span class="keyword">import</span> javax.swing.JLabel;</div><div class="line"><span class="keyword">import</span> javax.swing.JPanel;</div><div class="line"><span class="keyword">import</span> javax.swing.JSlider;</div><div class="line"><span class="keyword">import</span> javax.swing.event.ChangeEvent;</div><div class="line"><span class="keyword">import</span> javax.swing.event.ChangeListener;</div><div class="line"></div><div class="line"><span class="keyword">import</span> org.opencv.core.Core;</div><div class="line"><span class="keyword">import</span> org.opencv.core.Mat;</div><div class="line"><span class="keyword">import</span> org.opencv.highgui.HighGui;</div><div class="line"><span class="keyword">import</span> org.opencv.imgcodecs.Imgcodecs;</div><div class="line"></div><div class="line"><span class="keyword">public</span> <span class="keyword">class </span>AddingImagesTrackbar {</div><div class="line">    <span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="keywordtype">int</span> ALPHA_SLIDER_MAX = 100;</div><div class="line">    <span class="keyword">private</span> <span class="keywordtype">int</span> alphaVal = 0;</div><div class="line">    <span class="keyword">private</span> Mat matImgSrc1;</div><div class="line">    <span class="keyword">private</span> Mat matImgSrc2;</div><div class="line">    <span class="keyword">private</span> Mat matImgDst = <span class="keyword">new</span> Mat();</div><div class="line">    <span class="keyword">private</span> JFrame frame;</div><div class="line">    <span class="keyword">private</span> JLabel imgLabel;</div><div class="line"></div><div class="line">    <span class="keyword">public</span> AddingImagesTrackbar(<a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a>[] args) {</div><div class="line">        <a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a> imagePath1 = <span class="stringliteral">&quot;../data/LinuxLogo.jpg&quot;</span>;</div><div class="line">        <a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a> imagePath2 = <span class="stringliteral">&quot;../data/WindowsLogo.jpg&quot;</span>;</div><div class="line">        <span class="keywordflow">if</span> (args.length &gt; 1) {</div><div class="line">            imagePath1 = args[0];</div><div class="line">            imagePath2 = args[1];</div><div class="line">        }</div><div class="line">        matImgSrc1 = Imgcodecs.imread(imagePath1);</div><div class="line">        matImgSrc2 = Imgcodecs.imread(imagePath2);</div><div class="line">        <span class="keywordflow">if</span> (matImgSrc1.empty()) {</div><div class="line">            System.out.println(<span class="stringliteral">&quot;Empty image: &quot;</span> + imagePath1);</div><div class="line">            System.exit(0);</div><div class="line">        }</div><div class="line">        <span class="keywordflow">if</span> (matImgSrc2.empty()) {</div><div class="line">            System.out.println(<span class="stringliteral">&quot;Empty image: &quot;</span> + imagePath2);</div><div class="line">            System.exit(0);</div><div class="line">        }</div><div class="line"></div><div class="line">        <span class="comment">// Create and set up the window.</span></div><div class="line">        frame = <span class="keyword">new</span> JFrame(<span class="stringliteral">&quot;Linear Blend&quot;</span>);</div><div class="line">        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);</div><div class="line">        <span class="comment">// Set up the content pane.</span></div><div class="line">        Image img = HighGui.toBufferedImage(matImgSrc2);</div><div class="line">        addComponentsToPane(frame.getContentPane(), img);</div><div class="line">        <span class="comment">// Use the content pane&#39;s default BorderLayout. No need for</span></div><div class="line">        <span class="comment">// setLayout(new BorderLayout());</span></div><div class="line">        <span class="comment">// Display the window.</span></div><div class="line">        frame.pack();</div><div class="line">        frame.setVisible(<span class="keyword">true</span>);</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="keyword">private</span> <span class="keywordtype">void</span> addComponentsToPane(Container pane, Image img) {</div><div class="line">        <span class="keywordflow">if</span> (!(pane.getLayout() instanceof BorderLayout)) {</div><div class="line">            pane.add(<span class="keyword">new</span> JLabel(<span class="stringliteral">&quot;Container doesn&#39;t use BorderLayout!&quot;</span>));</div><div class="line">            <span class="keywordflow">return</span>;</div><div class="line">        }</div><div class="line"></div><div class="line">        JPanel sliderPanel = <span class="keyword">new</span> JPanel();</div><div class="line">        sliderPanel.setLayout(<span class="keyword">new</span> BoxLayout(sliderPanel, BoxLayout.PAGE_AXIS));</div><div class="line"></div><div class="line">        sliderPanel.add(<span class="keyword">new</span> JLabel(<a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a>.format(<span class="stringliteral">&quot;Alpha x %d&quot;</span>, ALPHA_SLIDER_MAX)));</div><div class="line">        JSlider slider = <span class="keyword">new</span> JSlider(0, ALPHA_SLIDER_MAX, 0);</div><div class="line">        slider.setMajorTickSpacing(20);</div><div class="line">        slider.setMinorTickSpacing(5);</div><div class="line">        slider.setPaintTicks(<span class="keyword">true</span>);</div><div class="line">        slider.setPaintLabels(<span class="keyword">true</span>);</div><div class="line">        slider.addChangeListener(<span class="keyword">new</span> ChangeListener() {</div><div class="line">            @Override</div><div class="line">            <span class="keyword">public</span> <span class="keywordtype">void</span> stateChanged(ChangeEvent e) {</div><div class="line">                JSlider source = (JSlider) e.getSource();</div><div class="line">                alphaVal = source.getValue();</div><div class="line">                update();</div><div class="line">            }</div><div class="line">        });</div><div class="line">        sliderPanel.add(slider);</div><div class="line"></div><div class="line">        pane.add(sliderPanel, BorderLayout.PAGE_START);</div><div class="line">        imgLabel = <span class="keyword">new</span> JLabel(<span class="keyword">new</span> ImageIcon(img));</div><div class="line">        pane.add(imgLabel, BorderLayout.CENTER);</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="keyword">private</span> <span class="keywordtype">void</span> update() {</div><div class="line">        <span class="keywordtype">double</span> alpha = alphaVal / (double) ALPHA_SLIDER_MAX;</div><div class="line">        <span class="keywordtype">double</span> beta = 1.0 - alpha;</div><div class="line">        Core.addWeighted(matImgSrc1, alpha, matImgSrc2, beta, 0, matImgDst);</div><div class="line">        Image img = HighGui.toBufferedImage(matImgDst);</div><div class="line">        imgLabel.setIcon(<span class="keyword">new</span> ImageIcon(img));</div><div class="line">        frame.repaint();</div><div class="line">    }</div><div class="line"></div><div class="line">    <span class="keyword">public</span> <span class="keyword">static</span> <span class="keywordtype">void</span> main(<a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a>[] args) {</div><div class="line">        <span class="comment">// Load the native OpenCV library</span></div><div class="line">        System.loadLibrary(Core.NATIVE_LIBRARY_NAME);</div><div class="line"></div><div class="line">        <span class="comment">// Schedule a job for the event dispatch thread:</span></div><div class="line">        <span class="comment">// creating and showing this application&#39;s GUI.</span></div><div class="line">        javax.swing.SwingUtilities.invokeLater(<span class="keyword">new</span> Runnable() {</div><div class="line">            @Override</div><div class="line">            <span class="keyword">public</span> <span class="keywordtype">void</span> run() {</div><div class="line">                <span class="keyword">new</span> AddingImagesTrackbar(args);</div><div class="line">            }</div><div class="line">        });</div><div class="line">    }</div><div class="line">}</div></div><!-- fragment -->  </div>  <div class='newInnerHTML' title='python' style='display: none;'>Python</div><div class='toggleable_div label_python' style='display: none;'><p> This tutorial code's is shown lines below. You can also download it from <a href="https://github.com/opencv/opencv/tree/master/samples/python/tutorial_code/highgui/trackbar/AddingImagesTrackbar.py">here</a> </p><div class="fragment"><div class="line"><span class="keyword">from</span> __future__ <span class="keyword">import</span> print_function</div><div class="line"><span class="keyword">from</span> __future__ <span class="keyword">import</span> division</div><div class="line"><span class="keyword">import</span> cv2 <span class="keyword">as</span> cv</div><div class="line"><span class="keyword">import</span> argparse</div><div class="line"></div><div class="line">alpha_slider_max = 100</div><div class="line">title_window = <span class="stringliteral">&#39;Linear Blend&#39;</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="keyword">def </span>on_trackbar(val):</div><div class="line">    alpha = val / alpha_slider_max</div><div class="line">    beta = ( 1.0 - alpha )</div><div class="line">    dst = <a class="code" href="../../d2/de8/group__core__array.html#gafafb2513349db3bcff51f54ee5592a19">cv.addWeighted</a>(src1, alpha, src2, beta, 0.0)</div><div class="line">    <a class="code" href="../../df/d24/group__highgui__opengl.html#gaae7e90aa3415c68dba22a5ff2cefc25d">cv.imshow</a>(title_window, dst)</div><div class="line"></div><div class="line"></div><div class="line">parser = argparse.ArgumentParser(description=<span class="stringliteral">&#39;Code for Adding a Trackbar to our applications tutorial.&#39;</span>)</div><div class="line">parser.add_argument(<span class="stringliteral">&#39;--input1&#39;</span>, help=<span class="stringliteral">&#39;Path to the first input image.&#39;</span>, default=<span class="stringliteral">&#39;LinuxLogo.jpg&#39;</span>)</div><div class="line">parser.add_argument(<span class="stringliteral">&#39;--input2&#39;</span>, help=<span class="stringliteral">&#39;Path to the second input image.&#39;</span>, default=<span class="stringliteral">&#39;WindowsLogo.jpg&#39;</span>)</div><div class="line">args = parser.parse_args()</div><div class="line"></div><div class="line"></div><div class="line">src1 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">cv.imread</a>(<a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">cv.samples.findFile</a>(args.input1))</div><div class="line">src2 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">cv.imread</a>(<a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">cv.samples.findFile</a>(args.input2))</div><div class="line"></div><div class="line"><span class="keywordflow">if</span> src1 <span class="keywordflow">is</span> <span class="keywordtype">None</span>:</div><div class="line">    <a class="code" href="../../df/d57/namespacecv_1_1dnn.html#a701210a0203f2786cbfd04b2bd56da47">print</a>(<span class="stringliteral">&#39;Could not open or find the image: &#39;</span>, args.input1)</div><div class="line">    exit(0)</div><div class="line"></div><div class="line"><span class="keywordflow">if</span> src2 <span class="keywordflow">is</span> <span class="keywordtype">None</span>:</div><div class="line">    <a class="code" href="../../df/d57/namespacecv_1_1dnn.html#a701210a0203f2786cbfd04b2bd56da47">print</a>(<span class="stringliteral">&#39;Could not open or find the image: &#39;</span>, args.input2)</div><div class="line">    exit(0)</div><div class="line"></div><div class="line"></div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#ga5afdf8410934fd099df85c75b2e0888b">cv.namedWindow</a>(title_window)</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">trackbar_name = <span class="stringliteral">&#39;Alpha x %d&#39;</span> % alpha_slider_max</div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)</div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Show some stuff</span></div><div class="line">on_trackbar(0)</div><div class="line"></div><div class="line"><span class="comment"># Wait until user press some key</span></div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#ga5628525ad33f52eab17feebcfba38bd7">cv.waitKey</a>()</div></div><!-- fragment -->  </div> <h2>Explanation </h2>
<p>We only analyze the code that is related to Trackbar:</p>
<ul>
<li>First, we load two images, which are going to be blended.</li>
</ul>
 <div class='newInnerHTML' title='cpp' style='display: none;'>C++</div><div class='toggleable_div label_cpp' style='display: none;'> <div class="fragment"><div class="line">   src1 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">imread</a>( <a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">samples::findFile</a>(<span class="stringliteral">&quot;LinuxLogo.jpg&quot;</span>) );</div><div class="line">   src2 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">imread</a>( <a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">samples::findFile</a>(<span class="stringliteral">&quot;WindowsLogo.jpg&quot;</span>) );</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='java' style='display: none;'>Java</div><div class='toggleable_div label_java' style='display: none;'> <div class="fragment"><div class="line">        <a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a> imagePath1 = <span class="stringliteral">&quot;../data/LinuxLogo.jpg&quot;</span>;</div><div class="line">        <a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a> imagePath2 = <span class="stringliteral">&quot;../data/WindowsLogo.jpg&quot;</span>;</div><div class="line">        <span class="keywordflow">if</span> (args.length &gt; 1) {</div><div class="line">            imagePath1 = args[0];</div><div class="line">            imagePath2 = args[1];</div><div class="line">        }</div><div class="line">        matImgSrc1 = Imgcodecs.imread(imagePath1);</div><div class="line">        matImgSrc2 = Imgcodecs.imread(imagePath2);</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='python' style='display: none;'>Python</div><div class='toggleable_div label_python' style='display: none;'> <div class="fragment"><div class="line"><span class="comment"># Read images ( both have to be of the same size and type )</span></div><div class="line">src1 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">cv.imread</a>(<a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">cv.samples.findFile</a>(args.input1))</div><div class="line">src2 = <a class="code" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56">cv.imread</a>(<a class="code" href="../../d6/dba/group__core__utils__samples.html#ga3a33b00033b46c698ff6340d95569c13">cv.samples.findFile</a>(args.input2))</div></div><!-- fragment --> </div> <ul>
<li>To create a trackbar, first we have to create the window in which it is going to be located. So:</li>
</ul>
 <div class='newInnerHTML' title='cpp' style='display: none;'>C++</div><div class='toggleable_div label_cpp' style='display: none;'> <div class="fragment"><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#ga5afdf8410934fd099df85c75b2e0888b">namedWindow</a>(<span class="stringliteral">&quot;Linear Blend&quot;</span>, <a class="code" href="../../d0/d90/group__highgui__window__flags.html#ggabf7d2c5625bc59ac130287f925557ac3acf621ace7a54954cbac01df27e47228f">WINDOW_AUTOSIZE</a>); <span class="comment">// Create Window</span></div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='java' style='display: none;'>Java</div><div class='toggleable_div label_java' style='display: none;'> <div class="fragment"><div class="line">        <span class="comment">// Create and set up the window.</span></div><div class="line">        frame = <span class="keyword">new</span> JFrame(<span class="stringliteral">&quot;Linear Blend&quot;</span>);</div><div class="line">        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);</div><div class="line">        <span class="comment">// Set up the content pane.</span></div><div class="line">        Image img = HighGui.toBufferedImage(matImgSrc2);</div><div class="line">        addComponentsToPane(frame.getContentPane(), img);</div><div class="line">        <span class="comment">// Use the content pane&#39;s default BorderLayout. No need for</span></div><div class="line">        <span class="comment">// setLayout(new BorderLayout());</span></div><div class="line">        <span class="comment">// Display the window.</span></div><div class="line">        frame.pack();</div><div class="line">        frame.setVisible(<span class="keyword">true</span>);</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='python' style='display: none;'>Python</div><div class='toggleable_div label_python' style='display: none;'> <div class="fragment"><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#ga5afdf8410934fd099df85c75b2e0888b">cv.namedWindow</a>(title_window)</div></div><!-- fragment --> </div> <ul>
<li>Now we can create the Trackbar:</li>
</ul>
 <div class='newInnerHTML' title='cpp' style='display: none;'>C++</div><div class='toggleable_div label_cpp' style='display: none;'> <div class="fragment"><div class="line">   <span class="keywordtype">char</span> TrackbarName[50];</div><div class="line">   sprintf( TrackbarName, <span class="stringliteral">&quot;Alpha x %d&quot;</span>, alpha_slider_max );</div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">createTrackbar</a>( TrackbarName, <span class="stringliteral">&quot;Linear Blend&quot;</span>, &amp;alpha_slider, alpha_slider_max, on_trackbar );</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='java' style='display: none;'>Java</div><div class='toggleable_div label_java' style='display: none;'> <div class="fragment"><div class="line">        sliderPanel.add(<span class="keyword">new</span> JLabel(<a class="code" href="../../dc/d84/group__core__basic.html#ga1f6634802eeadfd7245bc75cf3e216c2">String</a>.format(<span class="stringliteral">&quot;Alpha x %d&quot;</span>, ALPHA_SLIDER_MAX)));</div><div class="line">        JSlider slider = <span class="keyword">new</span> JSlider(0, ALPHA_SLIDER_MAX, 0);</div><div class="line">        slider.setMajorTickSpacing(20);</div><div class="line">        slider.setMinorTickSpacing(5);</div><div class="line">        slider.setPaintTicks(<span class="keyword">true</span>);</div><div class="line">        slider.setPaintLabels(<span class="keyword">true</span>);</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='python' style='display: none;'>Python</div><div class='toggleable_div label_python' style='display: none;'> <div class="fragment"><div class="line">trackbar_name = <span class="stringliteral">&#39;Alpha x %d&#39;</span> % alpha_slider_max</div><div class="line"><a class="code" href="../../d7/dfc/group__highgui.html#gaf78d2155d30b728fc413803745b67a9b">cv.createTrackbar</a>(trackbar_name, title_window , 0, alpha_slider_max, on_trackbar)</div></div><!-- fragment --> </div> <p>Note the following (C++ code):</p><ul>
<li>Our Trackbar has a label <b>TrackbarName</b></li>
<li>The Trackbar is located in the window named <b>Linear Blend</b></li>
<li>The Trackbar values will be in the range from \(0\) to <b>alpha_slider_max</b> (the minimum limit is always <b>zero</b>).</li>
<li>The numerical value of Trackbar is stored in <b>alpha_slider</b></li>
<li>Whenever the user moves the Trackbar, the callback function <b>on_trackbar</b> is called</li>
</ul>
<p>Finally, we have to define the callback function <b>on_trackbar</b> for C++ and Python code, using an anonymous inner class listener in Java</p>
 <div class='newInnerHTML' title='cpp' style='display: none;'>C++</div><div class='toggleable_div label_cpp' style='display: none;'> <div class="fragment"><div class="line"></div><div class="line"><span class="keyword">static</span> <span class="keywordtype">void</span> on_trackbar( <span class="keywordtype">int</span>, <span class="keywordtype">void</span>* )</div><div class="line">{</div><div class="line">   alpha = (double) alpha_slider/alpha_slider_max ;</div><div class="line">   beta = ( 1.0 - alpha );</div><div class="line">   <a class="code" href="../../d2/de8/group__core__array.html#gafafb2513349db3bcff51f54ee5592a19">addWeighted</a>( src1, alpha, src2, beta, 0.0, dst);</div><div class="line">   <a class="code" href="../../d7/dfc/group__highgui.html#ga453d42fe4cb60e5723281a89973ee563">imshow</a>( <span class="stringliteral">&quot;Linear Blend&quot;</span>, dst );</div><div class="line">}</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='java' style='display: none;'>Java</div><div class='toggleable_div label_java' style='display: none;'> <div class="fragment"><div class="line">        slider.addChangeListener(<span class="keyword">new</span> ChangeListener() {</div><div class="line">            @Override</div><div class="line">            <span class="keyword">public</span> <span class="keywordtype">void</span> stateChanged(ChangeEvent e) {</div><div class="line">                JSlider source = (JSlider) e.getSource();</div><div class="line">                alphaVal = source.getValue();</div><div class="line">                update();</div><div class="line">            }</div><div class="line">        });</div></div><!-- fragment --> </div>  <div class='newInnerHTML' title='python' style='display: none;'>Python</div><div class='toggleable_div label_python' style='display: none;'> <div class="fragment"><div class="line"><span class="keyword">def </span>on_trackbar(val):</div><div class="line">    alpha = val / alpha_slider_max</div><div class="line">    beta = ( 1.0 - alpha )</div><div class="line">    dst = <a class="code" href="../../d2/de8/group__core__array.html#gafafb2513349db3bcff51f54ee5592a19">cv.addWeighted</a>(src1, alpha, src2, beta, 0.0)</div><div class="line">    <a class="code" href="../../df/d24/group__highgui__opengl.html#gaae7e90aa3415c68dba22a5ff2cefc25d">cv.imshow</a>(title_window, dst)</div></div><!-- fragment --> </div> <p>Note that (C++ code):</p><ul>
<li>We use the value of <b>alpha_slider</b> (integer) to get a double value for <b>alpha</b>.</li>
<li><b>alpha_slider</b> is updated each time the trackbar is displaced by the user.</li>
<li>We define <em>src1</em>, <em>src2</em>, <em>dist</em>, <em>alpha</em>, <em>alpha_slider</em> and <em>beta</em> as global variables, so they can be used everywhere.</li>
</ul>
<h2>Result </h2>
<ul>
<li><p class="startli">Our program produces the following output:</p>
<div class="image">
<img src="../../Adding_Trackbars_Tutorial_Result_0.jpg" alt="Adding_Trackbars_Tutorial_Result_0.jpg"/>
</div>
</li>
<li><p class="startli">As a manner of practice, you can also add two trackbars for the program made in <a class="el" href="../../d3/dc1/tutorial_basic_linear_transform.html">Changing the contrast and brightness of an image!</a>. One trackbar to set \(\alpha\) and another for set \(\beta\). The output might look like:</p>
<div class="image">
<img src="../../Adding_Trackbars_Tutorial_Result_1.jpg" alt="Adding_Trackbars_Tutorial_Result_1.jpg"/>
</div>
 </li>
</ul>
</div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.6-->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Fri Apr 2 2021 11:36:34 for OpenCV by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="../../doxygen.png" alt="doxygen"/>
</a> 1.8.13
</small></address>
<script type="text/javascript">
//<![CDATA[
addTutorialsButtons();
//]]>
</script>
</body>
</html>
